<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Horizontal Slider</title>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }

    .slider-container {
        width: 100%;
        overflow-x: scroll;
        white-space: nowrap;
        padding: 10px 0;
        background-color: #f0f0f0;
    }

    .slide {
        display: inline-block;
        max-width: 15%;
        height: auto;
        margin: 0 10px;
        transition: transform 0.3s ease;
        cursor: pointer;
        border-radius: 8px;
    }

    @media screen and (max-width: 768px) {
        .slide {
            width: 90%;
        }
    }
</style>
</head>
<body>
    <div class="slider-container" id="slider">
        <!-- JavaScript会将数组中的图片插入到这里 -->
    </div>

    <script>
        eval(fy_bridge_app.getInternalJs());
        const ruleMap = JSON.parse(fba.getVar(":ruleMap"));
        const images = JSON.parse(fba.getVar(":carouselMap"));
        const sliderContainer = document.getElementById('slider');

        images.forEach(image => {
            if (image.url.startsWith("/t/") || image.url.includes("/page")) {
                const slide = document.createElement('img');
                slide.src = image.logo || image.pic;
                slide.classList.add('slide');
                
                slide.addEventListener('click', () => {
                    fba.open(JSON.stringify({
                        rule: ruleMap.title,
                        url: `hiker://page/Carousel.view?rule=酷安&page=fypage&array=${encodeURIComponent(JSON.stringify(image))}&hiker=#noHistory##noRecordHistory##gameTheme#fypage`,
                        findRule: ruleMap.detail_find_rule,
                        extra: {
                            newWindow: true,
                            windowId: ruleMap.title,
                            pageTitle: image.title
                        }
                    }));
                });
                
                sliderContainer.appendChild(slide);
            }
        });
    </script>
</body>
</html>